<template>
  <div>
    <div class="pc">
      <swipers></swipers>
      <div class="zhjqr">
        <!-- 第一部分 -->
        <el-row type="flex" justify="center">
          <el-col :xs="24" :sm="20" :md="12" :lg="12">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              style="margin-top: 50px"
              class="bioat-box1"
            >
              <el-col :xs="24" :sm="24" :md="1" :lg="1"
                ><img src="../assets/zhnjqr.png" alt=""
              /></el-col>
              <el-col :xs="24" :sm="24" :md="23" :lg="23"
                ><div class="sp1">智能机器人</div></el-col
              >
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 30px"
              class="left-box"
            >
              <el-col class="text-box" :xs="24" :sm="24" :md="24" :lg="24">
                <div class="flex1">
                  我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
                </div>
                <div class="banyuan"></div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" class="bany"></el-col>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 20px"
              class="right-box"
            >
              <img src="../assets/chp1.png" alt="" class="img1" />
            </el-col>
          </el-col>
        </el-row>

        <!-- 第二部分 -->
        <el-row type="flex" justify="center">
          <el-col :xs="24" :sm="20" :md="12" :lg="12">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              style="margin-top: 50px"
              class="bioat-box2"
            >
              <el-col :xs="24" :sm="24" :md="23" :lg="23"
                ><div class="sp1">智能机器人</div></el-col
              >
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 20px"
              class="right-box"
            >
              <img src="../assets/chp1.png" alt="" class="img1" />
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 30px"
              class="left-box"
            >
              <el-col class="text-box" :xs="24" :sm="24" :md="24" :lg="24">
                <div id="flex2">
                  我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
                </div>
                <div class="banyuan2"></div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" class="bany"></el-col>
            </el-col>
          </el-col>
        </el-row>

        <!-- 第三部分 -->
        <el-row type="flex" justify="center">
          <el-col :xs="24" :sm="20" :md="12" :lg="12">
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              style="margin-top: 50px"
              class="bioat-box1"
            >
              <el-col :xs="24" :sm="24" :md="1" :lg="1"
                ><img src="../assets/zhnjqr.png" alt=""
              /></el-col>
              <el-col :xs="24" :sm="24" :md="23" :lg="23"
                ><div class="sp1">智能机器人</div></el-col
              >
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 30px"
              class="left-box"
            >
              <el-col class="text-box" :xs="24" :sm="24" :md="24" :lg="24">
                <div class="flex1">
                  我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
                </div>
                <div class="banyuan"></div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" class="bany"></el-col>
            </el-col>

            <el-col
              :xs="24"
              :sm="24"
              :md="12"
              :lg="12"
              style="margin-top: 20px"
              class="right-box"
            >
              <img src="../assets/chp1.png" alt="" class="img1" />
            </el-col>
          </el-col>
        </el-row>

        <!-- 第四部分 -->
        <el-row type="flex" justify="center" class="datu">
          <el-col class="fuji-box" :xs="24" :sm="24" :md="12" :lg="12">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" class="da-img">
              <img src="../assets/indexImg1.png" alt="" />
            </el-col>
            <el-col :xs="20" :sm="20" :md="12" :lg="12" class="tm-box">
              <el-col class="p-1">智能机器人</el-col>
              <el-col class="p-2"
                >我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</el-col
              >
            </el-col>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="yd">
      <swipers></swipers>
      <!-- 第一块 -->
      <div class="box">
        <div class="dh-box">
          <img src="../assets/zhnjqr.png" alt="" />
          <div class="sp1">智能机器人</div>
        </div>
        <dir class="p1">
          我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
        </dir>
        <div class="img-box">
          <img src="../assets/chp1.png" alt="" class="img1" />
        </div>
      </div>
      <!-- 第二块 -->
      <div class="box">
        <div class="dh-box">
          <img src="../assets/zhnjqr.png" alt="" />
          <div class="sp1">智能机器人</div>
        </div>
        <dir class="p1">
          我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
        </dir>
        <div class="img-box">
          <img src="../assets/chp1.png" alt="" class="img1" />
        </div>
        <!-- 第三部分 -->
        <div class="yd-fuji-box">
          <div class="yd-da-img">
            <img src="../assets/indexImg1.png" alt="" />
          </div>
          <div class="yd-tm-box">
            <div class="yd-p-1">智能机器人</div>
            <div class="yd-p-2">
              我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import swipers from "@/components/swiperImg.vue";
export default {
  components: {
    swipers,
  },
  data() {
    return {
      listImg: [
        {
          id: 0,
          url: "../assets/indexImg1.png",
          txt: "校办/教职工会议",
        },
        {
          id: 1,
          url: "../assets/indexImg1.png",
          txt: "校办/教职工会议",
        },
        {
          id: 2,
          url: "../assets/indexImg2.png",
          txt: "校办/教职工会议",
        },
        {
          id: 3,
          url: "../assets/indexImg1.png",
          txt: "校办/教职工会议",
        },
        {
          id: 4,
          url: "../assets/indexImg1.png",
          txt: "校办/教职工会议",
        },
      ],
    };
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc {
  display: none;
}
.yd {
  display: block;
}
/*根据媒体查询控制显示 */
@media (min-width: 750px) {
  .pc {
    display: block;
  }
  .yd {
    display: none;
  }
}
/* pc端样式 */
.zhjqr {
  width: 100%;
  margin-top: 20px;
}
img {
  width: 100%;
  height: 100%;
}
.img1 {
  width: 100%;
  height: 210px;
}
.bioat-box1 {
  text-align: start;
}
.bioat-box2 {
  text-align: end;
}
.sp1 {
  font-size: 30px;
  font-weight: bold;
  margin-left: 10px;
}

.flex1 {
  font-size: 12px;
  text-align: left;
  color: #798099;
}
#flex2 {
  font-size: 12px;
  text-align: end;
  color: #798099;
}
.bioati {
  height: 60px;
  margin: 0 20px;
}
.text-box {
  position: relative;
}
.banyuan {
  width: 180px;
  height: 180px;
  border-radius: 90px;
  background: linear-gradient(180deg, rgba(86, 140, 233, 0) 31%, #568ce9 100%);
  position: absolute;
  top: -20px;
  left: 0;
}
.banyuan2 {
  width: 180px;
  height: 180px;
  border-radius: 90px;
  background: linear-gradient(180deg, rgba(86, 140, 233, 0) 31%, #568ce9 100%);
  position: absolute;
  top: -20px;
  right: 10px;
}
.left-box {
  padding-right: 10px;
}
.right-box {
  padding-left: 10px;
}
.datu {
  height: 364px;
  margin: 50px 0;
}
.da-img {
  height: 364px;
  width: 100%;
}
.fuji-box {
  position: relative;
}
.tm-box {
  height: 154px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -77px;
  margin-left: -224px;
  text-align: center;
  padding: 0 60px;
}
.p-1 {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  margin-top: 10px;
}
.p-2 {
  color: #fff;
  font-size: 8px;
  margin: 20px 0;
}

/* 移动端样式 */
.yd .box {
  width: 355px;
  padding: 0 10px;
}
.yd .box .dh-box {
  width: 355px;
  display: flex;
  margin: 20px 0;
}
.yd .box .dh-box > img {
  width: 40px;
  height: 40px;
  text-align: left;
  font-size: 14px;
  color: #666;
}
.yd .box .p1 {
  text-align: left;
  font-size: 12px;
  color: #666;
  margin-bottom: 50px;
}
.yd .box .img-box {
  margin-bottom: 20px;
}

.yd-fuji-box {
  position: relative;
  margin-bottom: 20px;
}
.yd-tm-box {
  width: 240px;
  height: 120px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -150px;
  text-align: center;
  padding: 0 30px;
}
.yd-p-1 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-top: 10px;
}
.yd-p-2 {
  color: #fff;
  font-size: 8px;
  margin: 20px 0;
}
</style>